﻿
@{
    ViewBag.Title = "Index";
}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    管理员管理 <span class="c-gray en">&gt;</span> 角色管理
    <a class="btn btn-success radius r mr-20"  style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont" >&#xe68f;</i>
    </a>
</nav>
<div class="pd-20">
    <div class="text-c">
        <input type="text" class="input-text" style="width:250px" placeholder="输入权限名称" id="pname" name="">
        <button type="button" class="btn btn-success" id="btn_Search" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户<tton>
    </div>
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            <a href="javascript:;" id="deleteBatch" class="btn btn-danger radius">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>
            <a class="btn btn-primary radius" href="javascript:;" id="per_Add">
                <i class="Hui-iconfont">&#xe600;</i> 添加权限
            </a>
        </span>
        <span class="r">共有数据：<strong>条</span>
    </div>
    <table id="tb_RoleList" class="table table-border table-bordered table-hover table-bg">
        <thead>
            <tr>
                <th scope="col" colspan="6">角色管理</th>
            </tr>
            <tr class="text-c">
                <th width="25"><input type="checkbox" value="" name=""></th>
                <th width="40">权限姓名</th>
                <th width="200">权限描述</th>
                <th width="70">操作</th>
            </tr>
        </thead>
    </table>
</div>

@section footScript{

    <script src="~/Scripts/jquery.dataTables.min.js"></script>
   
    <script>
        $(function () {
            var params = {};
            var table = $("#tb_RoleList").DataTable({
                info: false, //是否显示情报 就是"当前显示1/100记录"这个信息
                pagingType: "full_numbers",//显示首页尾页
                processing: true, //显示加载中提示....
                ordering: false,//是否排序
                paging: true,//是否显示分页
                searching: false,//是否显示默认的搜索
                //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
                columns: [
                    { data: 'Id' },
                    { data: 'Name' },
                    { data: 'Description' },
                    {
                        data: 'Id', render: function (data, type, full, callback) {
                            return (' <a title="编辑" href="javascript:;" data-id=' + data + ' class="ml-5 edit" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除"  href="javascript:;"  data-id=' + data + ' class="ml-5 delete" style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a>   ')
                        }
                    }
                ],
                createdRow: function (row, data, index) {
                    /* 设置表格中的内容居中 */
                    $('td', row).attr("class", "text-c");
                },
                //开启服务器模式
                serverSide: true,
                //使用ajax异步请求
                ajax: {
                    type: 'post',
                    url: '/Permission/GetPerList',
                    data: function (d) {
                        params.start = d.start;//开始的序号
                        params.length = d.length;//要取的数据的条数
                        return params;//自定义需要传递的参数。
                    }
                },
                //自定义列
                columnDefs: [{
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" value="' + row.Id + '" name="selectIDs">';
                    }
                }
                    // { "orderable": false, "targets": 4 },
                ]

              
            });
            //搜索
            $("#btn_Search").click(function () {
                params.name = $("#pname").val();
                table.ajax.reload();
            })

            //添加
            $("#per_Add").click(function () {
                layer_show("添加权限", "/Permission/AddPer", 600, 300);
            })

            //删除
            $(".delete").livequery("click", function () {
                //获取当前点击要删的元素
                var _this = $(this);
               
                //弹出确认框
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                    //获取要删除的该行的Id
                    var id = _this.attr("data-id");
                    //向服务器发送ajax请求
                    $.post("DeletePer", { id: id }, function (data) {
                        if (data.State==1) {
                            layer.msg(data.ErrorMessage);
                            location.reload();
                        } else {
                            layer.msg(data.ErrorMessage);
                        }

                    })
                    

                });

            })


            //批量删除
            $("#deleteBatch").click(function () {
                var checkeds = $(":checkbox[name='selectIDs']:checked");
                var id =[];
                checkeds.each(function () {
                    id.push($(this).val())
                })
                console.log(id);
                if (id.length==0) {
                    layer.msg('请选择你要删除的数据!');

                } else {
                    layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                        $.post("DeletePers", { id: id }, function (data) {
                            if (data.State==1) {
                                layer.msg(data.ErrorMessage);
                                location.reload();
                            } else {
                                layer.msg(data.ErrorMessage);
                            }

                        })
                    })
                }
               


            })

            //编辑
            $(".edit").livequery("click", function () {
                //获取要编辑行的Id
                var id = $(this).attr("data-id");
                layer_show("修改权限", "/Permission/EditPer/" + id, 600, 300);
              
            
            })
        })
    </script>

}